/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
	content: "";
  display: table;
  clear: both;
}

/* global 
body {
  background-color: rgb(40,40,40);
  color: rgb(100,100,100);
 }
.wrapper {
  margin: 0 auto;
  padding: 20px;
  max-width: 95%;
  background-color: #fff;
}*/


/* grid */
.row {
  margin: 0 -10px;
  margin-bottom: 20px;
}
.row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  padding: 10px;
}

@media all and ( min-width: 640px ) 
  {
  .col-2-3 {
    float: left;
    width: 66.66%;
  }
  .col-1-2 {
    float: left;
    width: 50%;
  }
  .col-1-3 {
    float: left;
    width: 33.33%;
  }
  .col-1-4 {
    float: left;
    width: 25%;
  }
  .col-2-4 {
    float: left;
    width: 50%;
  }
  .col-3-4 {
    float: left;
    width: 75%;	
  }
  .col-1-5 {
    float: left;
    width: 20%;
  }
  .col-2-5 {
    float: left;
    width: 40%;
  }
  .col-3-5 {
    float: left;
    width: 60%;
  }
  .col-4-5 {
    float: left;
    width: 80%;	
  }
  .col-1-6 {
    float: left;
    width: 16.6%;	
  }
  .col-1-8 {
    float: left;
    width: 12.5%;
  }
  
}